<template>
	<div class="sp">
		<ul class="sp-nav">
		    <li v-for="(v,i) in sw1" :class="v.cl" :key="i" @click="swclick(i)">
				<span v-if="v.imgs"><img :src="v.imgs"></span><span>{{v.title}}</span>
		    </li>
		</ul>
		<swiper class="sp-navs" :options="swb" ref="mySwiper">
		    <swiper-slide v-for="(a,s) in sw2" :key="s">
		    	<div class="sw2-top">
		    		<span>{{a.swTitle}}</span>
		    		<span v-if="a.swContent">{{a.swContent}}</span>
		    	</div>
		    	<div class="sw2-bottom">
		    		<div class="swb" v-for="(m,b) in a.menu" :key="b">
		    			<div v-if="m.tu" class="swb-left">
			    			<img :src="m.tu">
			    		</div>
			    		<div class="swb-right">
			    			<div class="sbr-title">
			    				{{m.me}}
			    			</div>
			    			<div v-if="m.spjs" class="sbr-spjs">
			    				{{m.spjs}}
			    			</div>
			    			<div class="sbr-con">
			    				{{m.con}}
			    			</div>
			    			<div v-if="m.zk" class="sbr-zk">
			    				<span>{{m.zk}}</span>
			    			</div>
			    			<div class="sbr-bot">
			    				<span class="price">
			    					￥<span>{{m.prie}}</span>
			    				</span>
			    				<span class="zj">
			    					<span class="plus" v-show="toggle" @click="jiana">
			    						{{jian}}
			    					</span>
			    					<span class="plus" v-show="toggle">
			    						{{count}}
			    					</span>
			    					<span class="plus" v-show="m.plus" @click="plus($event)">
			    						{{m.plus}}
			    					</span>
			    					<span class="xz" v-if="m.span">
			    						{{m.span}}
			    					</span>
			    					<span class="sk" v-if="m.s">
			    						已售完
			    					</span>
			    				</span>
			    			</div>
			    		</div>
		    		</div>
		    	</div>
		    </swiper-slide>
		</swiper>
		<xqFooter></xqFooter>
	</div>
</template>
<script>
import xqFooter from "@/components/particulars/xqFooter"

export default {
	data() {
		return{
			count: 0,
			toggle: false,
			jian: '-',
			swb: {
				direction : 'vertical',
				slidesPerView : 'auto',
				mousewheel: {
				    releaseOnEdges: true,
				},
				on: {
					init: function(){
						var lis=document.querySelectorAll('.sp-nav li');
						for(var i=0;i<lis.length;i++){
							lis[i].className='';
						}
						// alert(this.activeIndex)
			            lis[this.activeIndex].className='li';
			    	}, 
			    	slideChangeTransitionStart: function(){
			            var lis=document.querySelectorAll('.sp-nav li');
			            for(var i=0;i<lis.length;i++){
			              lis[i].className='';
			            }
			            lis[this.activeIndex].className='li';
			     	},
				},
			},
			sw1:[
				{
					imgs:"https://fuss10.elemecdn.com/0/6a/05b267f338acfeb8bd682d16e836dpng.png?imageMogr/format/webp/thumbnail/18x/",
					title:"热销",
					cl:"li"
				},
				{
					title:"冷菜烧味",
				},
				{
					title:"海鲜类",
				},
				{
					title:"鸡鸭之选",
				},
				{
					title:"营养汤羹",
				},
				{
					title:"家畜类",
				},
				{
					title:"辛辣之选",
				},
				{
					title:"健康宿舍",
				},
				{
					title:"主食类",
				},
				{
					title:"甜品",
				},
				{
					title:"饮料",
				},
				{
					title:"主食面",
				}
			],
			sw2:[
				{
					swTitle:'热销',
					swContent:"大家喜欢吃, 才叫喜欢吃。",
					menu: [
						{
							tu: "https://fuss10.elemecdn.com/2/3c/70be5dc9c946af0a7df6686e51077jpeg.jpeg?imageMogr/format/webp/thumbnail/!140x140r/gravity/Center/crop/140x140/",
							me: "冰火菠萝油",
							spjs:"选用奥利奥饼干碎，英国进口淡奶油，新鲜现做专人直送....280ml盒子尺寸13*9*5.5cm",
							con: "月售46份, 好评率100%",
							zk:"5.5折",
							prie: 10,
							plus: "+",
						}
					]
				},
				{
					swTitle:'冷菜烧味',
					menu: [
						{
							tu: "https://fuss10.elemecdn.com/9/c6/c2b8dfb7d920e878b719037c84706jpeg.jpeg?imageMogr/format/webp/thumbnail/!140x140r/gravity/Center/crop/140x140/",
							me: "蜜汁叉烧",
							con: "月售6份, 好评率100%",
							prie: 52,
							plus: "+",
						},
						{
							tu: "https://fuss10.elemecdn.com/9/c6/c2b8dfb7d920e878b719037c84706jpeg.jpeg?imageMogr/format/webp/thumbnail/!140x140r/gravity/Center/crop/140x140/",
							me: "蜜汁叉烧",
							con: "月售6份, 好评率100%",
							prie: 52,
							span: "选价格"
						},
						{
							tu: "https://fuss10.elemecdn.com/9/c6/c2b8dfb7d920e878b719037c84706jpeg.jpeg?imageMogr/format/webp/thumbnail/!140x140r/gravity/Center/crop/140x140/",
							me: "蜜汁叉烧",
							con: "月售6份, 好评率100%",
							prie: 52,
							plus: "+",
						},
						{
							tu: "https://fuss10.elemecdn.com/9/c6/c2b8dfb7d920e878b719037c84706jpeg.jpeg?imageMogr/format/webp/thumbnail/!140x140r/gravity/Center/crop/140x140/",
							me: "蜜汁叉烧",
							con: "月售6份, 好评率100%",
							prie: 52,
							plus: "+",
						},
						{
							tu: "https://fuss10.elemecdn.com/9/c6/c2b8dfb7d920e878b719037c84706jpeg.jpeg?imageMogr/format/webp/thumbnail/!140x140r/gravity/Center/crop/140x140/",
							me: "蜜汁叉烧",
							con: "月售6份, 好评率100%",
							prie: 52,
							span: "选价格"
						}
					]
				},
				{
					swTitle:'海鲜类',
					menu: [
						{
							tu: "https://fuss10.elemecdn.com/9/f3/e4c519b13e95ca610ef5117c961ffjpeg.jpeg?imageMogr/format/webp/thumbnail/!140x140r/gravity/Center/crop/140x140/",
							me: "蜜汁叉烧",
							con: "月售6份, 好评率100%",
							prie: 62,
							plus: "+",
						},
						{
							tu: "https://fuss10.elemecdn.com/9/f3/e4c519b13e95ca610ef5117c961ffjpeg.jpeg?imageMogr/format/webp/thumbnail/!140x140r/gravity/Center/crop/140x140/",
							me: "蜜汁叉烧",
							con: "月售6份, 好评率100%",
							prie: 62,
							plus: "+",
						},
						{
							tu: "https://fuss10.elemecdn.com/9/f3/e4c519b13e95ca610ef5117c961ffjpeg.jpeg?imageMogr/format/webp/thumbnail/!140x140r/gravity/Center/crop/140x140/",
							me: "蜜汁叉烧",
							con: "月售6份, 好评率100%",
							prie: 62,
							plus: "+",
						},
						{
							tu: "https://fuss10.elemecdn.com/9/f3/e4c519b13e95ca610ef5117c961ffjpeg.jpeg?imageMogr/format/webp/thumbnail/!140x140r/gravity/Center/crop/140x140/",
							me: "蜜汁叉烧",
							con: "月售6份, 好评率100%",
							prie: 62,
							plus: "+",
						},
						{
							tu: "https://fuss10.elemecdn.com/9/f3/e4c519b13e95ca610ef5117c961ffjpeg.jpeg?imageMogr/format/webp/thumbnail/!140x140r/gravity/Center/crop/140x140/",
							me: "蜜汁叉烧",
							con: "月售6份, 好评率100%",
							prie: 62,
							plus: "+",
						},
						{
							tu: "https://fuss10.elemecdn.com/9/f3/e4c519b13e95ca610ef5117c961ffjpeg.jpeg?imageMogr/format/webp/thumbnail/!140x140r/gravity/Center/crop/140x140/",
							me: "蜜汁叉烧",
							con: "月售6份, 好评率100%",
							prie: 62,
							plus: "+",
						},
						{
							tu: "https://fuss10.elemecdn.com/9/f3/e4c519b13e95ca610ef5117c961ffjpeg.jpeg?imageMogr/format/webp/thumbnail/!140x140r/gravity/Center/crop/140x140/",
							me: "蜜汁叉烧",
							con: "月售6份, 好评率100%",
							prie: 62,
							plus: "+",
						},
						{
							tu: "https://fuss10.elemecdn.com/9/f3/e4c519b13e95ca610ef5117c961ffjpeg.jpeg?imageMogr/format/webp/thumbnail/!140x140r/gravity/Center/crop/140x140/",
							me: "蜜汁叉烧",
							con: "月售6份, 好评率100%",
							prie: 62,
							plus: "+",
						}
					]
				},
				{
					swTitle:'鸡鸭之选',
					menu: [
						{
							tu: "https://fuss10.elemecdn.com/9/f3/e4c519b13e95ca610ef5117c961ffjpeg.jpeg?imageMogr/format/webp/thumbnail/!140x140r/gravity/Center/crop/140x140/",
							me: "蜜汁叉烧",
							con: "月售6份, 好评率100%",
							prie: 62,
							plus: "+",
						},
						{
							me: "蜜汁叉烧",
							con: "月售6份, 好评率100%",
							prie: 62,
							plus: "+",
						},
						{
							tu: "https://fuss10.elemecdn.com/9/f3/e4c519b13e95ca610ef5117c961ffjpeg.jpeg?imageMogr/format/webp/thumbnail/!140x140r/gravity/Center/crop/140x140/",
							me: "蜜汁叉烧",
							con: "月售6份, 好评率100%",
							prie: 62,
							plus: "+",
						},
						{
							me: "蜜汁叉烧",
							con: "月售6份, 好评率100%",
							prie: 62,
							plus: "+",
						},
						{
							tu: "https://fuss10.elemecdn.com/9/f3/e4c519b13e95ca610ef5117c961ffjpeg.jpeg?imageMogr/format/webp/thumbnail/!140x140r/gravity/Center/crop/140x140/",
							me: "蜜汁叉烧",
							con: "月售6份, 好评率100%",
							prie: 62,
							plus: "+",
						},
						{
							tu: "https://fuss10.elemecdn.com/9/f3/e4c519b13e95ca610ef5117c961ffjpeg.jpeg?imageMogr/format/webp/thumbnail/!140x140r/gravity/Center/crop/140x140/",
							me: "蜜汁叉烧",
							con: "月售6份, 好评率100%",
							prie: 62,
							plus: "+",
						},
						{
							tu: "https://fuss10.elemecdn.com/9/f3/e4c519b13e95ca610ef5117c961ffjpeg.jpeg?imageMogr/format/webp/thumbnail/!140x140r/gravity/Center/crop/140x140/",
							me: "蜜汁叉烧",
							con: "月售6份, 好评率100%",
							prie: 62,
							plus: "+",
						},
						{
							tu: "https://fuss10.elemecdn.com/9/f3/e4c519b13e95ca610ef5117c961ffjpeg.jpeg?imageMogr/format/webp/thumbnail/!140x140r/gravity/Center/crop/140x140/",
							me: "蜜汁叉烧",
							con: "月售6份, 好评率100%",
							prie: 62,
							plus: "+",
						}
					]
				},
				{
					swTitle:'营养汤羹',
					menu: [
						{
							tu: "https://fuss10.elemecdn.com/9/c6/c2b8dfb7d920e878b719037c84706jpeg.jpeg?imageMogr/format/webp/thumbnail/!140x140r/gravity/Center/crop/140x140/",
							me: "蜜汁叉烧",
							con: "月售6份, 好评率100%",
							prie: 52,
							plus: "+",
						},
						{
							tu: "https://fuss10.elemecdn.com/9/c6/c2b8dfb7d920e878b719037c84706jpeg.jpeg?imageMogr/format/webp/thumbnail/!140x140r/gravity/Center/crop/140x140/",
							me: "蜜汁叉烧",
							con: "月售6份, 好评率100%",
							prie: 52,
							span: "选价格"
						},
						{
							tu: "https://fuss10.elemecdn.com/9/c6/c2b8dfb7d920e878b719037c84706jpeg.jpeg?imageMogr/format/webp/thumbnail/!140x140r/gravity/Center/crop/140x140/",
							me: "蜜汁叉烧",
							con: "月售6份, 好评率100%",
							prie: 52,
							plus: "+",
						},
						{
							tu: "https://fuss10.elemecdn.com/9/c6/c2b8dfb7d920e878b719037c84706jpeg.jpeg?imageMogr/format/webp/thumbnail/!140x140r/gravity/Center/crop/140x140/",
							me: "蜜汁叉烧",
							con: "月售6份, 好评率100%",
							prie: 52,
							plus: "+",
						},
						{
							tu: "https://fuss10.elemecdn.com/9/c6/c2b8dfb7d920e878b719037c84706jpeg.jpeg?imageMogr/format/webp/thumbnail/!140x140r/gravity/Center/crop/140x140/",
							me: "蜜汁叉烧",
							con: "月售6份, 好评率100%",
							prie: 52,
							span: "选价格"
						}
					]
				},
				{
					swTitle:'家畜类',
					menu: [
						{
							tu: "https://fuss10.elemecdn.com/9/c6/c2b8dfb7d920e878b719037c84706jpeg.jpeg?imageMogr/format/webp/thumbnail/!140x140r/gravity/Center/crop/140x140/",
							me: "蜜汁叉烧",
							con: "月售6份, 好评率100%",
							prie: 52,
							plus: "+",
						},
						{
							tu: "https://fuss10.elemecdn.com/9/c6/c2b8dfb7d920e878b719037c84706jpeg.jpeg?imageMogr/format/webp/thumbnail/!140x140r/gravity/Center/crop/140x140/",
							me: "蜜汁叉烧",
							con: "月售6份, 好评率100%",
							prie: 52,
							span: "选价格"
						},
						{
							tu: "https://fuss10.elemecdn.com/9/c6/c2b8dfb7d920e878b719037c84706jpeg.jpeg?imageMogr/format/webp/thumbnail/!140x140r/gravity/Center/crop/140x140/",
							me: "蜜汁叉烧",
							con: "月售6份, 好评率100%",
							prie: 52,
							plus: "+",
						},
						{
							tu: "https://fuss10.elemecdn.com/9/c6/c2b8dfb7d920e878b719037c84706jpeg.jpeg?imageMogr/format/webp/thumbnail/!140x140r/gravity/Center/crop/140x140/",
							me: "蜜汁叉烧",
							con: "月售6份, 好评率100%",
							prie: 52,
							plus: "+",
						},
						{
							tu: "https://fuss10.elemecdn.com/9/c6/c2b8dfb7d920e878b719037c84706jpeg.jpeg?imageMogr/format/webp/thumbnail/!140x140r/gravity/Center/crop/140x140/",
							me: "蜜汁叉烧",
							con: "月售6份, 好评率100%",
							prie: 52,
							span: "选价格"
						}
					]
				},
				{
					swTitle:'辛辣之选',
					menu: [
						{
							tu: "https://fuss10.elemecdn.com/9/c6/c2b8dfb7d920e878b719037c84706jpeg.jpeg?imageMogr/format/webp/thumbnail/!140x140r/gravity/Center/crop/140x140/",
							me: "蜜汁叉烧",
							con: "月售6份, 好评率100%",
							prie: 52,
							plus: "+",
						},
						{
							tu: "https://fuss10.elemecdn.com/9/c6/c2b8dfb7d920e878b719037c84706jpeg.jpeg?imageMogr/format/webp/thumbnail/!140x140r/gravity/Center/crop/140x140/",
							me: "蜜汁叉烧",
							con: "月售6份, 好评率100%",
							prie: 52,
							span: "选价格"
						},
						{
							tu: "https://fuss10.elemecdn.com/9/c6/c2b8dfb7d920e878b719037c84706jpeg.jpeg?imageMogr/format/webp/thumbnail/!140x140r/gravity/Center/crop/140x140/",
							me: "蜜汁叉烧",
							con: "月售6份, 好评率100%",
							prie: 52,
							plus: "+",
						},
						{
							tu: "https://fuss10.elemecdn.com/9/c6/c2b8dfb7d920e878b719037c84706jpeg.jpeg?imageMogr/format/webp/thumbnail/!140x140r/gravity/Center/crop/140x140/",
							me: "蜜汁叉烧",
							con: "月售6份, 好评率100%",
							prie: 52,
							plus: "+",
						},
						{
							tu: "https://fuss10.elemecdn.com/9/c6/c2b8dfb7d920e878b719037c84706jpeg.jpeg?imageMogr/format/webp/thumbnail/!140x140r/gravity/Center/crop/140x140/",
							me: "蜜汁叉烧",
							con: "月售6份, 好评率100%",
							prie: 52,
							span: "选价格"
						}
					]
				},
				{
					swTitle:'健康素食',
					menu: [
						{
							tu: "https://fuss10.elemecdn.com/9/c6/c2b8dfb7d920e878b719037c84706jpeg.jpeg?imageMogr/format/webp/thumbnail/!140x140r/gravity/Center/crop/140x140/",
							me: "蜜汁叉烧",
							con: "月售6份, 好评率100%",
							prie: 52,
							plus: "+",
						},
						{
							tu: "https://fuss10.elemecdn.com/9/c6/c2b8dfb7d920e878b719037c84706jpeg.jpeg?imageMogr/format/webp/thumbnail/!140x140r/gravity/Center/crop/140x140/",
							me: "蜜汁叉烧",
							con: "月售6份, 好评率100%",
							prie: 52,
							span: "选价格"
						},
						{
							tu: "https://fuss10.elemecdn.com/9/c6/c2b8dfb7d920e878b719037c84706jpeg.jpeg?imageMogr/format/webp/thumbnail/!140x140r/gravity/Center/crop/140x140/",
							me: "蜜汁叉烧",
							con: "月售6份, 好评率100%",
							prie: 52,
							plus: "+",
						},
						{
							tu: "https://fuss10.elemecdn.com/9/c6/c2b8dfb7d920e878b719037c84706jpeg.jpeg?imageMogr/format/webp/thumbnail/!140x140r/gravity/Center/crop/140x140/",
							me: "蜜汁叉烧",
							con: "月售6份, 好评率100%",
							prie: 52,
							plus: "+",
						},
						{
							tu: "https://fuss10.elemecdn.com/9/c6/c2b8dfb7d920e878b719037c84706jpeg.jpeg?imageMogr/format/webp/thumbnail/!140x140r/gravity/Center/crop/140x140/",
							me: "蜜汁叉烧",
							con: "月售6份, 好评率100%",
							prie: 52,
							span: "选价格"
						}
					]
				},
				{
					swTitle:'主食类',
					menu: [
						{
							tu: "https://fuss10.elemecdn.com/9/c6/c2b8dfb7d920e878b719037c84706jpeg.jpeg?imageMogr/format/webp/thumbnail/!140x140r/gravity/Center/crop/140x140/",
							me: "蜜汁叉烧",
							con: "月售6份, 好评率100%",
							prie: 52,
							plus: "+",
						},
						{
							tu: "https://fuss10.elemecdn.com/9/c6/c2b8dfb7d920e878b719037c84706jpeg.jpeg?imageMogr/format/webp/thumbnail/!140x140r/gravity/Center/crop/140x140/",
							me: "蜜汁叉烧",
							con: "月售6份, 好评率100%",
							prie: 52,
							span: "选价格"
						},
						{
							tu: "https://fuss10.elemecdn.com/9/c6/c2b8dfb7d920e878b719037c84706jpeg.jpeg?imageMogr/format/webp/thumbnail/!140x140r/gravity/Center/crop/140x140/",
							me: "蜜汁叉烧",
							con: "月售6份, 好评率100%",
							prie: 52,
							plus: "+",
						},
						{
							tu: "https://fuss10.elemecdn.com/9/c6/c2b8dfb7d920e878b719037c84706jpeg.jpeg?imageMogr/format/webp/thumbnail/!140x140r/gravity/Center/crop/140x140/",
							me: "蜜汁叉烧",
							con: "月售6份, 好评率100%",
							prie: 52,
							plus: "+",
						},
						{
							tu: "https://fuss10.elemecdn.com/9/c6/c2b8dfb7d920e878b719037c84706jpeg.jpeg?imageMogr/format/webp/thumbnail/!140x140r/gravity/Center/crop/140x140/",
							me: "蜜汁叉烧",
							con: "月售6份, 好评率100%",
							prie: 52,
							span: "选价格"
						}
					]
				},
				{
					swTitle:'甜品',
					menu: [
						{
							tu: "https://fuss10.elemecdn.com/9/c6/c2b8dfb7d920e878b719037c84706jpeg.jpeg?imageMogr/format/webp/thumbnail/!140x140r/gravity/Center/crop/140x140/",
							me: "蜜汁叉烧",
							con: "月售6份, 好评率100%",
							prie: 52,
							plus: "+",
						},
						{
							tu: "https://fuss10.elemecdn.com/9/c6/c2b8dfb7d920e878b719037c84706jpeg.jpeg?imageMogr/format/webp/thumbnail/!140x140r/gravity/Center/crop/140x140/",
							me: "蜜汁叉烧",
							con: "月售6份, 好评率100%",
							prie: 52,
							span: "选价格"
						},
						{
							tu: "https://fuss10.elemecdn.com/9/c6/c2b8dfb7d920e878b719037c84706jpeg.jpeg?imageMogr/format/webp/thumbnail/!140x140r/gravity/Center/crop/140x140/",
							me: "蜜汁叉烧",
							con: "月售6份, 好评率100%",
							prie: 52,
							plus: "+",
						},
						{
							tu: "https://fuss10.elemecdn.com/9/c6/c2b8dfb7d920e878b719037c84706jpeg.jpeg?imageMogr/format/webp/thumbnail/!140x140r/gravity/Center/crop/140x140/",
							me: "蜜汁叉烧",
							con: "月售6份, 好评率100%",
							prie: 52,
							plus: "+",
						},
						{
							tu: "https://fuss10.elemecdn.com/9/c6/c2b8dfb7d920e878b719037c84706jpeg.jpeg?imageMogr/format/webp/thumbnail/!140x140r/gravity/Center/crop/140x140/",
							me: "蜜汁叉烧",
							con: "月售6份, 好评率100%",
							prie: 52,
							span: "选价格"
						}
					]
				},
				{
					swTitle:'饮料',
					menu: [
						{
							tu: "https://fuss10.elemecdn.com/9/c6/c2b8dfb7d920e878b719037c84706jpeg.jpeg?imageMogr/format/webp/thumbnail/!140x140r/gravity/Center/crop/140x140/",
							me: "蜜汁叉烧",
							con: "月售6份, 好评率100%",
							prie: 52,
							plus: "+",
						},
						{
							tu: "https://fuss10.elemecdn.com/9/c6/c2b8dfb7d920e878b719037c84706jpeg.jpeg?imageMogr/format/webp/thumbnail/!140x140r/gravity/Center/crop/140x140/",
							me: "蜜汁叉烧",
							con: "月售6份, 好评率100%",
							prie: 52,
							span: "选价格"
						},
						{
							tu: "https://fuss10.elemecdn.com/9/c6/c2b8dfb7d920e878b719037c84706jpeg.jpeg?imageMogr/format/webp/thumbnail/!140x140r/gravity/Center/crop/140x140/",
							me: "蜜汁叉烧",
							con: "月售6份, 好评率100%",
							prie: 52,
							plus: "+",
						},
						{
							tu: "https://fuss10.elemecdn.com/9/c6/c2b8dfb7d920e878b719037c84706jpeg.jpeg?imageMogr/format/webp/thumbnail/!140x140r/gravity/Center/crop/140x140/",
							me: "蜜汁叉烧",
							con: "月售6份, 好评率100%",
							prie: 52,
							plus: "+",
						},
						{
							tu: "https://fuss10.elemecdn.com/9/c6/c2b8dfb7d920e878b719037c84706jpeg.jpeg?imageMogr/format/webp/thumbnail/!140x140r/gravity/Center/crop/140x140/",
							me: "蜜汁叉烧",
							con: "月售6份, 好评率100%",
							prie: 52,
							span: "选价格"
						}
					]
				},
				{
					swTitle:'主食面',
					menu: [
						{
							tu: "https://fuss10.elemecdn.com/9/c6/c2b8dfb7d920e878b719037c84706jpeg.jpeg?imageMogr/format/webp/thumbnail/!140x140r/gravity/Center/crop/140x140/",
							me: "蜜汁叉烧",
							con: "月售6份, 好评率100%",
							prie: 52,
							plus: "+",
						},
						{
							tu: "https://fuss10.elemecdn.com/9/c6/c2b8dfb7d920e878b719037c84706jpeg.jpeg?imageMogr/format/webp/thumbnail/!140x140r/gravity/Center/crop/140x140/",
							me: "蜜汁叉烧",
							con: "月售6份, 好评率100%",
							prie: 52,
							span: "选价格"
						},
						{
							tu: "https://fuss10.elemecdn.com/9/c6/c2b8dfb7d920e878b719037c84706jpeg.jpeg?imageMogr/format/webp/thumbnail/!140x140r/gravity/Center/crop/140x140/",
							me: "蜜汁叉烧",
							con: "月售6份, 好评率100%",
							prie: 52,
							plus: "+",
						},
						{
							tu: "https://fuss10.elemecdn.com/9/c6/c2b8dfb7d920e878b719037c84706jpeg.jpeg?imageMogr/format/webp/thumbnail/!140x140r/gravity/Center/crop/140x140/",
							me: "蜜汁叉烧",
							con: "月售6份, 好评率100%",
							prie: 52,
							plus: "+",
						},
						{
							tu: "https://fuss10.elemecdn.com/9/c6/c2b8dfb7d920e878b719037c84706jpeg.jpeg?imageMogr/format/webp/thumbnail/!140x140r/gravity/Center/crop/140x140/",
							me: "蜜汁叉烧",
							con: "月售6份, 好评率100%",
							prie: 52,
							span: "选价格"
						}
					]
				},
			]
		}
	},
	methods: {
		jiana () {
			this.count--
			if (this.count < 1) {
				this.toggle = false
			}
		},
		plus (b) {
			console.log(b.target)
			this.count++
			if (this.count > 0) {
				this.toggle = true
			}
		},
		swclick(e) {
			var lis=document.querySelectorAll('.sp-nav li');
		      console.log(this)
		      for(var i=0;i<lis.length;i++){
		        lis[i].className='';
		      }
		      this.swiper.slideTo(e, 1000, false)
		      lis[e].className='li'
		}
	},
	components: {
		xqFooter
	},
    computed: {
      swiper() {
      	console.log(this.$refs)
        return this.$refs.mySwiper.swiper
      }
    }
}
</script>
<style lang="less">
.pxToRem(@p,@px){
    @{p}: @px / 75 * 1rem;
}
.sp{
	display: flex;
	width: 100%;
	height: 94vh;
	overflow: hidden;
	.sp-nav{
		background: #f8f8f8;
		width: 100%;
		height: 84vh;
		.pxToRem(width,154);
		overflow: auto;
		li{
			color: #666;
			box-sizing: border-box;
			.pxToRem(height,100);
			display: flex;
			align-items:center;
			justify-content:center;
			border-bottom: 1px solid #e8e8e8;
		}
		.li{
			color: #333;
			background: #fff;
		}
	}
	.sp-navs{
		background: #fff;
		flex:1;
		height: 84vh;
		.swiper-slide{
			height: auto;
			box-sizing: border-box;
			padding-left: 2%;
			padding-right: 2%;
			/* border-bottom: 1px solid #e8e8e8; */
			.sw2-top{
				.pxToRem(height,58);
				.pxToRem(line-height,58);
				border-bottom: 1px solid #e8e8e8;
				span{
					&:nth-child(1){
						.pxToRem(font-size,32);
						color: #666;
					}
					&:nth-child(2){
						.pxToRem(font-size,26);
						color: #999;
					}
				}
			}
			.sw2-bottom{
				width: 100%;
				display: flex;
				flex-direction:column;
				.swb{
					width: 100%;
					display: flex;
					padding-top: 2%;
					padding-bottom: 2%;
					border-bottom: 1px solid #e8e8e8;
					.swb-left{
						margin-right: 2%;
						.pxToRem(width,152);
						img{
							width: 100%;
						}
					}
					.swb-right{
						flex:1;
						.sbr-title{
							.pxToRem(line-height,36);
							.pxToRem(font-size,32);
							color: #333;
							font-weight: bold;
						}
						.sbr-spjs{
							width: 100%;
				        	box-sizing: border-box;
				        	padding-right: 2%;
							color: #999;
							.pxToRem(height,40);
							.pxToRem(line-height,40);
							.pxToRem(font-size,22);
							/* white-space: nowrap; */
							overflow: hidden;
				        	text-overflow: ellipsis;
						}
						.sbr-con{
							color: #666;
							.pxToRem(line-height,46);
							.pxToRem(font-size,22);
						}
						.sbr-zk{
							.pxToRem(line-height,26);
							span{
								padding: 1px;
								background: #ff7416;
								color: #fff;
								.pxToRem(font-size,18);
							}
						}
						.sbr-bot{
							.pxToRem(line-height,50);
							display: flex;
							justify-content:space-between;
							.price{
								.pxToRem(font-size,18);
								color: #f60;
								span{
									.pxToRem(font-size,32);
								}
							}
							.zj{
								.plus{
									display: flex;
									justify-content:center;
									align-items:center;
									.pxToRem(width,40);
									.pxToRem(height,40);
									background: #2395ff;
									border-radius: 52%;
									color: #fff;
									.pxToRem(font-size,40);
									font-weight: bold;
								}
								.xz,.sk{
									.pxToRem(font-size,22);
									color: #999;
								}
							}
						}
					}
				}
			}
		}
	}
}
</style>